import React from 'react';
import {
  Axis,
  Chart,
  Tooltip,
  Interval,
  View,
  Line,
  Legend,
  getTheme,
  Point,
} from 'bizcharts';

const data = [
  { name: '数据源总数', type: '地磅', chartData: 32 },
  { name: '数据源总数', type: 'SIS', chartData: 60 },
  { name: '数据源总数', type: '随手拍', chartData: 28 },
  { name: '数据源总数', type: '钉钉录入', chartData: 22 },
  { name: '数据质量异常数据源数量', type: '地磅', chartData: 12 },
  { name: '数据质量异常数据源数量', type: 'SIS', chartData: 15 },
  { name: '数据质量异常数据源数量', type: '随手拍', chartData: 2 },
  { name: '数据质量异常数据源数量', type: '钉钉录入', chartData: 1 },
];

const averageData = [
  { type: '地磅', lineData: 30, name: 'percent' },
  { type: 'SIS', lineData: 25, name: 'percent' },
  { type: '随手拍', lineData: 7.1, name: 'percent' },
  { type: '钉钉录入', lineData: 4.5, name: 'percent' },
];

const theme = getTheme();

const scale = {
  type: {
    sync: true,
  },
  chartData: {
    min: 0,
    alias: '数据源(个数)',
  },
  lineData: {
    min: 0,
    alias: '异常数据源占比(%)',
  },
};

const colors = theme.colors10;
/**
 * 图例开关状态
 */
let legendMap = {};
/**
 * 图表实例
 */
let chartIns;

export default function LeftChart(props) {
  return (
    <Chart
      height={props.height - 55}
      padding={[40, 80, 50]}
      scale={scale}
      data={data}
      autoFit
      onGetG2Instance={c => (chartIns = c)}
    >
      <Tooltip shared />
      <Interval
        adjust={[
          {
            type: 'dodge',
            marginRatio: 0,
          },
        ]}
        color={['name', [colors[0], colors[2]]]}
        position="type*chartData"
      />
      <Axis
        name="chartData"
        position="left"
        title={{
          style: {
            fontSize: 14,
            textAlign: 'center',
          },
        }}
        label={{
          formatter(text) {
            return `${text}个`;
          },
        }}
      />
      <View data={averageData} scale={scale} padding={0}>
        <Axis
          name="lineData"
          position="right"
          title={{
            style: {
              fontSize: 14,
              textAlign: 'center',
            },
          }}
          label={{
            formatter(text) {
              return `${text}%`;
            },
          }}
        />
        <Line
          position="type*lineData"
          color={colors[1]}
          label={[
            'lineData',
            value => ({
              content: value + '%',
            }),
          ]}
          tooltip={[
            'type*lineData',
            (x, y) => ({
              name: '异常数据源占比',
              value: `${y}%`,
            }),
          ]}
        />
        <Point position="type*lineData" tooltip={false} shape="circle" />
      </View>
      <Legend
        position="top-left"
        offsetX="24"
        custom={true}
        items={[
          {
            name: '数据源总数',
            value: '数据源总数',
            marker: {
              symbol: 'square',
              style: { fill: colors[0] },
            },
          },
          {
            name: '数据质量异常数据源数量',
            value: '数据质量异常数据源数量',
            marker: {
              symbol: 'square',
              style: { fill: colors[2] },
            },
          },
          {
            name: '异常数据源占比',
            value: 'percent',
            marker: {
              symbol: 'hyphen',
              style: { stroke: colors[1], lineWidth: 2 },
            },
          },
        ]}
        onChange={ev => {
          const { item } = ev;
          const { value } = item;
          const checked = !item.unchecked;
          // 设置图例项状态
          legendMap[value] = checked;
          if (value === 'percent') {
            // 通过filter控制元素显示隐藏
            const view = chartIns.views[0];
            view.filter('name', val => {
              return legendMap[val];
            });
            // 重新渲染，触发filter
            view.render(true);
          } else {
            // 通过filter控制元素显示隐藏
            chartIns.filter('name', val => {
              return legendMap[val] !== false;
            });
            // 重新渲染，触发filter
            chartIns.render(true);
          }
        }}
      />
    </Chart>
  );
}
